
import mixin from '@/service/mixin';
import Pagination from '@/components/pagination';
import SelectAppList from '@/components/select-app-list';
import UploadImage from '@/components/upload-image';
import { regExp } from '@/config/index';

export default {
    name: 'banner-manage',
    components: {
        Pagination,
        SelectAppList,
        UploadImage,
    },
    mixins: [mixin],
    data() {
        const checkBannerImg = (rule, value, callback) => {
            // console.log(rule, value);
            if (value) {
                const img = new Image();
                img.onload = () => {
                    const width = img.naturalWidth || img.width;
                    const height = img.naturalHeight || img.height;
                    // console.log(width, height);
                    if (width / height !== 345 / 130) {
                        callback(new Error(this.$tc('operation.bannerSize')));
                    } else {
                        callback();
                    }
                };
                img.src = value;
                img.onerror = () => {
                    callback(new Error(this.$tc('common.imgLoadError'))); // 图片加载错误
                };
            } else {
                callback();
            }
        };
        return {
            form: {
                appName: '',
            },
            rules: {},
            dialog: {
                show: false,
                title: '',
                positionList: 1,
                form: {
                    name: '',
                    link: '',
                    remark: '',
                    banner: '', // https://testingph.oss-cn-hongkong.aliyuncs.com/947341104012028591.png
                    position: '',
                    appName: '',
                    id: '',
                },
                bannerImg: {
                    url: '',
                    id: '',
                },
                rules: {
                    name: [
                        { required: true, message: this.$t('verify.plsInput') }, // 请输入
                    ],
                    link: [
                        { pattern: regExp.url, message: this.$t('verify.plsEnterRightUrl'), trigger: 'blur' }, // 请输入正确的URL地址
                    ],
                    remark: [],
                    banner: [
                        { required: true, message: this.$t('verify.plsUpload') }, // 请上传
                        { validator: checkBannerImg },
                    ],
                    position: [],
                },
            },
            showImgLoading: false,
        };
    },
    watch: {
        'dialog.bannerImg.url'(val) {
            if (val) {
                this.showImgLoading = true;
            }
            this.dialog.form.banner = val;
            this.$refs.bannerForm.validateField('banner');
        }
    },
    methods: {
        // 获取列表数据
        getTableData(page = this.page) {
            const { appName } = this.form;
            const params = {
                appName,
                pageNo: page.currentPage,
                pageSize: this.page.pageSize,
            };
            this.$api.operation.getBannerInfo(params).then(res => {
                const { status, data } = res;
                if ('1' === status && data) {
                    this.tableData = data.list;
                    this.page.recordsTotal = data.total;
                    this.page.currentPage = page.currentPage;
                    this.tableMaxHeight = document.body.clientHeight - 200;
                }
            });
        },
        // 搜索
        search() {
            this.getTableData({ currentPage: 1 });
        },
        // app列表选择
        getAppList(data) {
            if (data.length > 0) {
                this.form.appName = data[0].name;
                this.getTableData();
            }
        },
        // 显示编辑
        showEdit(row) {
            const form = this.dialog.form;
            form.banner = row.image;
            form.name = row.name;
            form.link = row.bannerUrl;
            form.remark = row.remark;
            form.position = row.position;
            form.appName = row.appName;
            form.id = row.id;
            this.dialog.title = this.$tc('common.edit');
            this.dialog.positionList = this.page.recordsTotal;
            this.dialog.show = true;
        },
        // 显示新增
        showAdd() {
            const form = this.dialog.form;
            form.banner = '';
            form.name = '';
            form.link = '';
            form.remark = '';
            form.position = this.page.recordsTotal + 1;
            form.appName = this.form.appName;
            form.id = '';
            this.dialog.title = this.$tc('common.add');
            this.dialog.positionList = this.page.recordsTotal + 1;
            this.dialog.show = true;
            this.$nextTick(() => {
                this.$refs.bannerForm.clearValidate();
            });
        },
        // 提交banner
        submitBanner() {
            this.$refs.bannerForm.validate(val => {
                if (val) {
                    const { name, link: bannerUrl, remark, banner: image, position, appName, id } = this.dialog.form;
                    const { id: operatorId, username: operatorName } = this.$storage.get('user');
                    const params = { name, bannerUrl, remark, image, position, appName, operatorId, operatorName };
                    if (id) params.id = id;
                    if (!bannerUrl) params.bannerUrl = undefined;
                    this.$api.operation.editBanner(params).then(res => {
                        const { status } = res;
                        if ('1' === status) {
                            this.$message.success(this.$tc('common.saveSuccess'));
                            this.getTableData();
                            this.dialog.show = false;
                        }
                    });
                }
            });
        },
        // 更改发布状态
        handleStatusChange(row) {
            const { status, id } = row;
            const { id: operatorId, username: operatorName } = this.$storage.get('user');
            const params = {
                status,
                operatorId,
                operatorName,
                id,
            };
            this.$api.operation.updateBannerStatus(params).then(res => {
                const { status } = res;
                if ('1' === status) {
                    this.$message.success(this.$tc('common.successfulOperation'));
                }
                this.getTableData();
            });
        },
        // 删除图片
        deleteImg() {
            this.dialog.form.banner = '';
            this.dialog.bannerImg.url = '';
        },
        // 图片加载完成
        imgLoaded() {
            this.showImgLoading = false;
        },
    },
    created() {
        // this.getTableData();
    }
}

